<mat-toolbar>
    <button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon">
        <mat-icon>arrow_forward_ios</mat-icon>
    </button>
    <span>音乐管理</span>

    <span class="example-spacer"></span>
     <!-- 搜索 -->
    <button (click)="search()" mat-icon-button class="example-icon" aria-label="Example icon-button with share icon">
        <mat-icon>search</mat-icon>
    </button>
    <mat-form-field>
        <mat-label>搜索内容</mat-label>
        <input (keyup)="search($event)" matInput placeholder="请输入..." [(ngModel)]="searchText">
        <button *ngIf="searchText" matSuffix mat-icon-button aria-label="Clear" (click)="searchText=''">
            <mat-icon>close</mat-icon>
        </button>
    </mat-form-field>

    <span class="example-spacer"></span>

    <!-- 垃圾箱 -->
    <button class="trush-button" mat-mini-fab [matBadge]="deleteCount" matBadgeOverlap="false"
    (click)="onShowDelete()" [color]="showDelete?'warn':'accent'">
        <mat-icon>delete</mat-icon>
    </button>

    <!-- 添加 -->
    <button mat-mini-fab color="primary" (click)="addNewMusic()">
        <mat-icon>add</mat-icon>
    </button>

</mat-toolbar>




<div class="container">
    <ng-container *ngFor="let item of MusicAlbumList">
        <music-card 
        [item] = "item" 
        (delete)="deleteMusic($event)"
        (edit)="editMusic($event)"
        (restore)="deleteMusic($event,true)" ></music-card>
    </ng-container>
</div>